<template>
  <f7-page class="notice-body5">
    <!-- 头部导航栏 -->
     <qm-currentcy-navbar title="通讯录">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <!-- 内容 -->
    <f7-block class="qm-block">
      <!-- 搜索栏 -->
      <qm-search v-model="value" placeholder="搜索联系人" shape='round'>
        <template #left-icon >
          <img src="static/img/notice/index5/search.svg" alt="" width="17px" height="17px" style="margin-top: 6px;">
        </template>
      </qm-search>
      <!-- 其他分组 -->
      <f7-row class="qm-row">
        <f7-col width="15"
          ><img src="static/img/notice/index5/icon-xiaoxi-touxiang.svg" alt=""
        /></f7-col>
        <f7-col width="85">
          <qm-field
            label="新的好友"
            :is-link="true"
            autosize
            readonly
            class="myfield"
          >
          </qm-field>
        </f7-col>
      </f7-row>
      <f7-row class="qm-row">
        <f7-col width="15"
          ><img src="static/img/notice/index5/icon-xiaoxi-gongsi.svg" alt=""
        /></f7-col>
        <f7-col width="85">
          <qm-field
            label="宇宙互联科技有限公司"
            :is-link="true"
            autosize
            readonly
            class="myfield"
          >
          </qm-field>
        </f7-col>
      </f7-row>
      <f7-row class="qm-row">
        <f7-col width="15"
          ><img src="static/img/notice/index5/icon-xiaoxi-tuandui.svg" alt=""
        /></f7-col>
        <f7-col width="85">
          <qm-field
            label="创建新的团队"
            :is-link="true"
            autosize
            readonly
            class="myfield"
          >
          </qm-field>
        </f7-col>
      </f7-row>

      <!-- 联系人 -->
      <f7-block-title class="qm-block-title"> 常用联系人 </f7-block-title>
      <!-- 联系人员 -->
      <ul>
        <li class="qm-li" v-for="(item, index) in list" :key="index">
          <a :href="item.href">
            <img :src="item.img" alt="" />
            {{ item.title }}
          </a>
        </li>
      </ul>
    </f7-block>
    <!-- 底部 -->
      <f7-viewbar-instince slot="fixed" :links='links'></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          href: "",
          img: "static/img/center/man-png.png",
          title: "小六的名字",
        },
        {
          href: "",
          img: "static/img/center/man-png.png",
          title: "小5",
        },
        {
          href: "",
          img: "static/img/center/man-png.png",
          title: "小4",
        },
        {
          href: "",
          img: "static/img/center/man-png.png",
          title: "小3",
        },
        {
          href: "",
          img: "static/img/center/man-png.png",
          title: "小2",
        },
      ],
      links: [
        {
          text: "消息",
          icon: "ellipses_bubble",
          class: "home",
          // href: "/business/index/",
          href: "/ui/home/index",
          tabLinkActive: true,
        },
        {
          text: "通讯录",
          icon: "doc_plaintext",
          class: "component",
          href: "/ui/notice/index4/",
          tabLinkActive: false,
        },
        {
          text: "工作",
          icon: "square_grid_2x2_fill",
          class: "person",
          href: "/ui/function-entrance/index",
          tabLinkActive: false,
        },
        {
          text: "我的",
          icon: "person_alt",
          class: "person",
          href: "/ui/center/index5",
          tabLinkActive: false,
        },
      ],
      value:''
    };
  },
  methods:{
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-search{
  padding: 0px;

}
/deep/ .van-cell{
   height: 35px;
  line-height: 30px;
}
.notice-body5 {
  // 表头
  background-color: var(--color-fill-grey-inverse);
  min-height: 667px;

  .f7-icons {
          font-size: calc(40px * var(--ratio));
          color: #000000e6
    }
  .qm-block {
    margin: 0px;
    --f7-block-padding-horizontal: calc(32px * var(--ratio));

    .qm-chip {
      width: 100%;
      height: calc(88px * var(--ratio));
      --f7-chip-height: 24px;

      .chip-media i.icon {
        color: #a2aab8;
        margin-left: 12px;
      }

      .chip-label {
        color: var(--color-text-weak);
        font-size: calc(28px * var(--ratio));
        margin-left: 10px;
      }
    }

    .qm-row {
      margin-top: calc(24px * var(--ratio));
      margin-bottom: 14px;
      img {
        width: calc(80px * var(--ratio));
        height: calc(80px * var(--ratio));
      }

      .myfield {
        padding: 10px 0px;

        .van-field__label {
          line-height: 24px;
          color: var(--color-text-title);
          font-size: calc(32px * var(--ratio));
          width: 80%;
        }
      }
    }

    .qm-block-title {
      --f7-block-margin-vertical: calc(46px * var(--ratio));
      --f7-block-title-font-size: calc(32px * var(--ratio));
      --f7-block-title-text-color: var(--color-text-title);
      --f7-block-title-font-weight: 600;
      --f7-block-title-margin-bottom: 0px;
      --f7-block-title-line-height: 21px;
      margin-left: 0px;
      margin-bottom: 0px;
    }

    ul {
      .qm-li {
        margin-top: calc(50px * var(--ratio));

        a {
          display: flex;
          color: var(--color-text-title);
          font-size: calc(32px * var(--ratio));
          width: 100%;
          line-height: 40px;

          img {
            width: calc(80px * var(--ratio));
            height: calc(80px * var(--ratio));
            margin-right: calc(24px * var(--ratio));
          }
        }
      }
    }
  }

  // 底部
  .toolbar-bottom:after {
    display: none;
  }
}

</style>
